<template>
  <div class="table-box">
    <div style="width: 100%;margin-bottom: 5px">
      <el-button type="primary" @click="refreshClick">{{ $t('wms.refresh') }}</el-button>
    </div>
    <el-empty v-if="!data.tableData.length" :description="$t('mes.noDataYet')"/>
    <el-table :span-method="genderSpanCity"
              :data="data.tableData"
              :fit="true" table-layout="fixed" header-align="center" stripe
              style="width:100%;height: 96%;"
              :cell-style="{borderColor:'#aaa'}"
              :header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9',height:'50px'}"
              v-else>
      <el-table-column :label="$t('wms.dailyProduct')" align="center" height="70px">
        <el-table-column>
          <el-table-column prop="process" :label="$t('mes.workingProcedure')" width="100" align="center"/>
          <el-table-column prop="item" width="130"/>
          <el-table-column prop="item2" width="150"/>
        </el-table-column>
        <!--二级标题日期-->
        <el-table-column v-for="(name,index) in data.title" :key="name" :label="name" align="center">
          <!-- 三级标题-->
          <el-table-column v-for="column in data.tableColumns" :key="column.prop"
                           :prop="column.prop"
                           :label="column.label" align="center">
            <template #default="scope">
              {{ scope.row.custom.length > 0 ? scope.row.custom[index][column.prop] : scope.row.custom[column.prop] }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>

import { defineProps, onMounted, reactive, watch } from 'vue'
import { exportExcel } from '@/api/mesApi'

const data = reactive({
  // tableData: [
  //   {
  //     process: '混料',
  //     item: '11CAAF02/碳酸钙',
  //     item2: '11CAAF02/碳酸钙',
  //     custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
  //   }, {
  //     process: '混料',
  //     item: '11PVAF03/5型树脂',
  //     item2: '11PVAF03/5型树脂',
  //     custom: '{"本周/This Week": 1 }'
  //   }, {
  //     process: '混料',
  //     item: '11PVAF04/7型树脂',
  //     item2: '11PVAF04/7型树脂',
  //     custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
  //   }, {
  //     process: '混料',
  //     item: '4330AF01/回料',
  //     item2: '4330AF01/回料',
  //     custom: '{"本周/This Week": 1 }'
  //   },
  //   {
  //     process: '挤出',
  //     item: '产出总托数',
  //     item2: '产出总托数',
  //     custom: '{"本周/This Week": 1 }'
  //   }, {
  //     process: '挤出',
  //     item: 'RGV调度次数',
  //     item2: 'RGV调度次数',
  //     custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
  //   }, {
  //     process: '挤出',
  //     item: 'ng板数量',
  //     item2: 'ng板数量',
  //     custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
  //   }, {
  //     process: '挤出',
  //     item: '养生区ng板数量',
  //     item2: '养生区ng板数量',
  //     custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
  //   },
  //   {
  //     process: '',
  //     item: '',
  //     item2: '',
  //     custom: ''
  //   }, {
  //     process: '贴合',
  //     item: '发泡板',
  //     item2: '投料记录',
  //     custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
  //   }, {
  //     process: '贴合',
  //     item: '发泡板',
  //     item2: 'RGV调度次数',
  //     custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
  //   }, {
  //     process: '贴合',
  //     item: '上基材',
  //     item2: '投料记录',
  //     custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
  //   }, {
  //     process: '贴合',
  //     item: '上基材',
  //     item2: '上料扫码次数',
  //     custom: '{"本周/This Week": 1}'
  //   }, {
  //     process: '贴合',
  //     item: '码垛',
  //     item2: '产出记录',
  //     custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
  //   }, {
  //     process: '贴合',
  //     item: '码垛',
  //     item2: 'RGV调度次数',
  //     custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
  //   }, {
  //     process: '贴合',
  //     item: '汇总数量',
  //     item2: '发泡板',
  //     custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
  //   }, {
  //     process: '贴合',
  //     item: '汇总数量',
  //     item2: '上基材',
  //     custom: '{"本周/This Week": 1}'
  //   },
  //   {
  //     process: '',
  //     item: '',
  //     item2: '',
  //     custom: ''
  //   }, {
  //     process: '锯开检',
  //     item: '贴合大张',
  //     item2: '投料记录',
  //     custom: '{"本周/This Week": 1}'
  //   }, {
  //     process: '锯开检',
  //     item: '贴合大张',
  //     item2: 'RGV调度次数',
  //     custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
  //   }, {
  //     process: '锯开检',
  //     item: 'CCD',
  //     item2: '前光电1计数',
  //     custom: '{"本周/This Week": 1}'
  //   }, {
  //     process: '锯开检',
  //     item: 'CCD',
  //     item2: '前光电2计数',
  //     custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
  //   }, {
  //     process: '锯开检',
  //     item: 'CCD',
  //     item2: '后光电计数',
  //     custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
  //   }, {
  //     process: '锯开检',
  //     item: '汇总数量',
  //     item2: '贴合大张',
  //     custom: '{"本周/This Week": 1}'
  //   }, {
  //     process: '锯开检',
  //     item: '汇总数量',
  //     item2: 'CCD产出',
  //     custom: '{"本周/This Week": 1}'
  //   },
  //   {
  //     process: '',
  //     item: '',
  //     item2: '',
  //     custom: ''
  //   }, {
  //     process: 'PE',
  //     item: '汇总数量',
  //     item2: '投入',
  //     custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
  //   }, {
  //     process: 'PE',
  //     item: '汇总数量',
  //     item2: '产出',
  //     months: '9月1日',
  //     custom: '{"本周/This Week": 1 }'
  //   },
  //   {
  //     process: '',
  //     item: '',
  //     item2: '',
  //     custom: ''
  //   }, {
  //     process: '打包',
  //     item: '汇总数量',
  //     item2: '投入',
  //     custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
  //   }, {
  //     process: '打包',
  //     item: '汇总数量',
  //     item2: '产出',
  //     custom: '{"本周/This Week": 1 }'
  //   }
  // ], // 表头数据
  tableColumns: [],
  propArr: [],
  title: [],
  tableData: []
})

const refreshClick = () => {
  location.reload()
}

const props = defineProps({
  tableList: { type: Array },
  dayList: { type: Array },
  arrLength: { type: Number },
  weeks: { type: String },
  years: { type: String }
})

watch(() => [props.tableList, props.dayList, props.arrLength, props.weeks, props.years], () => {
  data.tableData = props.tableList
  data.title = props.dayList
  // console.log(data.title.length)
  if (props.tableList != null) {
    data.tableColumns = []
    data.propArr = []
    if (props.dayList.length <= 1) {
      data.tableData.forEach(item => {
        item.custom = JSON.stringify(item.custom)
        if (item.custom) {
          item.custom = JSON.parse(item.custom)
          Object.keys(item.custom).forEach(key => {
            if (data.propArr.indexOf(key) === -1) {
              data.propArr.push(key)
              data.tableColumns.push({
                prop: key,
                label: key
              })
            }
          })
        }
      })
    } else {
      data.tableData.forEach(item => {
        if (item.custom.length > 1) {
          Object.keys(item.custom[0]).forEach(key => {
            if (data.propArr.indexOf(key) === -1) {
              data.propArr.push(key)
              data.tableColumns.push({
                prop: key,
                label: key
              })
            }
          })
        }
      })
    }
  } else {
    data.tableData = []
    data.tableColumns = []
    data.propArr = []
    console.log(props.tableList, '无数据')
  }
})

// 合并列
const genderSpanCity = ({
  row,
  column,
  rowIndex,
  columnIndex
}) => {
  // 合并前4行的2列与3列
  for (let i = 0; i < 13; i++) {
    if (columnIndex === 1 && rowIndex === i) {
      return {
        rowspan: 1,
        colspan: 2
      }
    } else if (columnIndex === 2 && rowIndex === i) {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }

  // if ((columnIndex === 6 || columnIndex === 4) && (rowIndex === 5 || rowIndex === 4 || rowIndex === 6)) {
  //   console.log(22222222222222)
  //   return {
  //     rowspan: 0,
  //     colspan: 0
  //   }
  // }
  // 合并第4行以后的数据
  for (let i = 4; i < data.tableData.length; i++) {
    if (columnIndex > 3 && columnIndex % 2 === 0 && rowIndex === i) {
      return [1, 3]
    } else if (columnIndex >= 3 && columnIndex % 2 === 1 && rowIndex === i) {
      return [0, 0]
    }
  }
  // 合并前两列的数据
  if (columnIndex === 0 || columnIndex === 1) {
    // 获取当前单元格的值
    const currentValue = row[column.property]
    // 获取上一行相同列的值
    const preRow = data.tableData[rowIndex - 1]
    const preValue = preRow ? preRow[column.property] : null
    // 如果当前值和上一行的值相同，则将当前单元格隐藏
    if (currentValue === preValue) {
      return {
        rowspan: 0,
        colspan: 0
      }
    } else {
      // 否则计算当前单元格应该跨越多少行
      let rowspan = 1
      for (let i = rowIndex + 1; i < data.tableData.length; i++) {
        const nextRow = data.tableData[i]
        const nextValue = nextRow[column.property]
        if (nextValue === currentValue) {
          rowspan++
        } else {
          break
        }
      }
      return {
        rowspan,
        colspan: 1
      }
    }
  }
}

// 导出 Excel
const excleClick = () => {
  // window.open('http://10.1.22.31:9770/mes/iotRestarea/notoken/exportExcel?year=' + props.years + '&week=' + props.weeks)
  exportExcel({
    year: props.years,
    week: props.weeks
  }).then(res => {
  })
}
</script>

<style scoped>
.table-box {
  height: 100%;
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
}
</style>
